<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ECharts">
<meta name="author" content="kener.linfeng@gmail.com">
<title>ECharts · Feature</title>

<link rel="shortcut icon" href="./asset/ico/favicon.png">

<link href="./asset/css/font-awesome.min.css" rel="stylesheet">
<link href="./asset/css/bootstrap.css" rel="stylesheet">
<link href="./asset/css/carousel.css" rel="stylesheet">
<link href="./asset/css/echartsHome.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

	<!-- Fixed navbar -->
	<div class="navbar navbar-default navbar-fixed-top" role="navigation"
		id="head"></div>

	<!-- Marketing messaging and featurettes
    ================================================== -->
	<!-- Wrap the rest of the page in another container to center all the content. -->

	<div class="container marketing">

		<div class="row featurette">
			<h2 class="featurette-heading">Architecture</h2>
			<div class="col-md-7 pull-right"
				style="padding: 0; margin-top: -60px;">
				<img src="./asset/img/architecture.png" alt="ECharts Architecture"
					style="max-width: 100%;" />
			</div>
			<p class="lead">ECharts (Enterprise Charts)</p>
			<p>
				ECharts is a comprehensive charting library offering a painless way
				of adding interactive charts to your commercial products. On the
				foundation of <a href="http://ecomfe.github.io/zrender/"
					target="_blank">ZRender</a>-based (a whole new lightweight canvas
				library) coordinate system, legend, tooltip, toolbox and other basic
				components, ECharts currently supports line, column, scatter, pie,
				radar, candlestick, chord, gauge, funnel, map and force-directed
				chart types, many of these can be combined in one chart.
			</p>
			<div style="float: left; margin: 20px 10px 30px 10px;">
				<img src="./asset/img/device.png" alt="Echarts device" />
			</div>
			<div>
				<img src="./asset/img/explorer.png" alt="Echarts explorer" />
				<div>
					<small>&nbsp;&nbsp;Compatible with most common browsers —
						including IE6/7/8/9+, Chrome, Firefox, Safari and Opera. <i><br />&nbsp;&nbsp;(IE8-
							powered by <a href="https://code.google.com/p/explorercanvas/"
							target="_blank">excanvas</a> )</i>
					</small>
				</div>
			</div>
			<p style="float: right; text-align: right;">
				<strong>-- Open source from the team of Baidu business
					front-end data visualization</strong><br />
				<span><a href="http://im.baidu.com/" target="_blank">Baidu
						Hi</a> : 1379172 | <a href="mailto:echarts(a)baidu.com">echarts(a)baidu.com</a></span>
			</p>
		</div>

		<div class="row featurette">
			<img src="./asset/img/why-echarts-m-en.png" alt="Why Echarts?"
				style="float: right; width: 180px; margin-right: 30px;" />
			<h2 class="featurette-heading">Features</h2>
			<p>
				You are cordially invited to view the document "<a
					href="./slide/whyEcharts-en.html" target="_blank">Why ECharts?</a>"
				online, which covers all the chart types and major features of
				ECharts.<br /> <small>*Since some features of the document
					don't work with IE8-, you are specifically recommended to read the
					document in IE9+, Chrome, Firefox, Safari, Opera or other modern
					browsers.</small>
			</p>
		</div>

		<div class="row featurette">
			<div class="col-md-5">
				<img src="./asset/img/mix.jpg" alt="Echarts mix" />
			</div>
			<div class="col-md-7">
				<h2 class="featurette-heading">Combinations</h2>
				<p>Compared with a single chart, a combination of charts can be
					more expressive and more interesting. ECharts supports any
					combination of any chart provided herein (a total of 11 types and
					17 subtypes) :</p>
				<p>
					Line (area), column (bar), scatter (bubble), candlestick,<br />Pie
					(doughnut), radar, map, chord, gauge, funnel, force-directed chart.
				</p>
				<p>A standard combination chart contains a legend, toolbox, data
					area zoom, scale roaming module, a Cartesian coordinate system
					(which may have one or two category/value axis/axes).</p>
			</div>
		</div>

		<div class="row featurette">
			<div class="col-md-6">
				<h2 class="featurette-heading">Drag-Recalculate</h2>
				<p>Our "Drag-Recalculate" feature (patented) brings you the best
					user experience ever: by allowing you to effectively extract,
					integrate, or even exchange data among multiple charts, ECharts
					open you up every opportunity for data mining and integration.</p>
			</div>
			<div class="col-md-6">
				<img src="./asset/img/draggable.gif" alt="Echarts Drag-Recalculate" />
			</div>
		</div>

		<div class="row featurette">
			<div class="col-md-6">
				<img src="./asset/img/dataView.gif" alt="Echarts dataView" />
			</div>
			<div class="col-md-6">
				<h2 class="featurette-heading">Data View</h2>
				<p>If the data means a lot to you, simply viewing the visualized
					data will no longer be satisfying, and you'll start to wish that
					you can download, save, share, or even process and integrate the
					original data.</p>
				<p>Now, it ceased to be a dream as we give you a comma-delimited
					data text, which is our Data View. Of course, you can always reload
					the output method of Data View to present your data your way.</p>
				<p>Moreover, via Data View you the wise can even edit your data
					and update the chart, which, compared with Drag-Recalculate, is
					batch operation!</p>
			</div>
		</div>

		<div class="row featurette">
			<div class="col-md-7">
				<h2 class="featurette-heading">Magic Switch</h2>
				<p>All charts present data. However, it's hard to tell which one
					is best since the performance depends on so many things: data
					itself, user's need, personal preference, etc. For example, it's
					always a big headache to choose between bar and line, stack and
					tile.</p>
				<p>With our Magic Switch, you can switch your chart
					effortlessly! Try to switch from bar to line, stack to tile, and
					you may well understand what suits you best.</p>
			</div>
			<div class="col-md-5">
				<img src="./asset/img/magicType.gif" alt="Echarts Magic Switch" />
			</div>
		</div>

		<div class="row featurette">
			<div class="col-md-6">
				<img src="./asset/img/legendSelected.gif"
					alt="Echarts Legend Switch" />
			</div>
			<div class="col-md-6">
				<h2 class="featurette-heading">Legend Switch</h2>
				<p>Multi-series of data show you multiple things, but how to
					focus on the single series that matters?</p>
				<p>With our Legend Switch, you can turn off other series and
					focus on the series you are interested in with just a click.</p>
			</div>
		</div>

		<div class="row featurette">
			<div class="col-md-6">
				<h2 class="featurette-heading">Area Zoom</h2>
				<p>Data can be infinite, but the display space is always
					limited. So you need Area Zoom to help you zoom in on a selected
					data area that you care about.</p>
				<p>
					Powered by great capability of data analysis, the Extreme MarkPoint
					and the Average MarkLine are always moving in lockstep. Try <a
						href="./example/mix10.html#-en" target="_blank">this 》</a>
				</p>
			</div>
			<div class="col-md-6">
				<img src="./asset/img/datazoom.gif" alt="Echarts Area Zoom" />
			</div>
		</div>

		<div class="row featurette">
			<div class="col-md-4">
				<img src="./asset/img/connect.gif" alt="Echarts Chart Linkage" />
			</div>
			<div class="col-md-8">
				<h2 class="featurette-heading">Chart Linkage</h2>
				<p>You've got multiple series of data to plot. They're
					associated and inseparable. But if you put them into one chart, it
					would be a mess sometimes. What could you do?</p>
				<p>
					With the Chart Linkage of ECharts, multiple charts can be easily
					linked up. And it's not just about displaying informative tooltips
					when hovered over; it's about sharing components and events, and
					stitching together automatically when saved as image. Try <a
						href="./example/mix8.html#-en" target="_blank">this 》</a>
				</p>
			</div>
		</div>

		<div class="row featurette">
			<div class="col-md-7">
				<h2 class="featurette-heading">Scale Roaming</h2>
				<p>The colors in a Cartesian chart (like map or scatter) will
					help you to classify data at first glance.</p>
				<p>But how to focus on data that matters after the initial
					analysis? With our Scale Roaming, you can turn off other scales and
					focus on the scale you are interested in with just a click.</p>
			</div>
			<div class="col-md-5">
				<img src="./asset/img/dataRange.gif" alt="Echarts Scale Roaming" />
			</div>
		</div>

		<div class="row featurette">
			<div class="col-md-4">
				<img src="./asset/img/effect.gif" alt="Echarts Glow Effect" />
			</div>
			<div class="col-md-8">
				<h2 class="featurette-heading">Glow Effect</h2>
				<p>We know that sometimes you gotta catch the eye.</p>
				<p>
					ECharts allow you to add a <a href="./example/map12.html#-en"
						target="_blank">glow effect</a> to the MarkPoints and MarkLines of
					your charts or maps in the twinkling of an eye. Here is an example
					of how twinkling it can be: <a href="./example/map11.html#-en"
						target="_blank">simulation of Baidu migration.</a>
				</p>
			</div>
		</div>

		<div class="row featurette">
			<div class="col-md-7">
				<h2 class="featurette-heading">Big Data Mode</h2>
				<p>Got tens of millions of data to present? And once again
					professional statistical tools (e.g. MATLAB) seems like the only
					option left?</p>
				<p>Nope, not anymore! Despite rich interactivity, ECharts can
					still plot up to 200,000 data points on a Cartesian chart (line,
					column, scatter, and candlestick) in the blink of an eye. For
					conventional applications, modern browsers would be all you need to
					show a million data points.</p>
			</div>
			<div class="col-md-5">
				<img src="./asset/img/scatter.gif" alt="Echarts Large Scale Scatter" />
			</div>
		</div>

		<div class="row featurette">
			<div class="col-md-3">
				<img src="./asset/img/dynamic1.gif" alt="Echarts Data Streaming" />
			</div>
			<div class="pull-left">
				<img src="./asset/img/dynamic2.gif" alt="Echarts Data Streaming"
					style="height: 175px" />
			</div>
			<div class="col-md-6">
				<h2 class="featurette-heading">Data Streaming</h2>
				<p>If you need to display up-to-second data, data streaming
					charts really hit the spot, for they will automatically update
					themselves every 'n' seconds by getting new data from the server.</p>
			</div>
		</div>

		<div class="row featurette">
			<div class="col-md-6">
				<h2 class="featurette-heading">Auxiliary Line</h2>
				<p>Trend line, average line, ascending trend channel, support…
					of course you know how to use them.</p>
				<p>ECharts allow you to add auxiliary lines not only on
					candlestick – which is a must – but also on every single chart type
					we support.</p>
			</div>
			<div class="col-md-6">
				<img src="./asset/img/mark.gif" alt="Echarts Auxiliary Lines" />
			</div>
		</div>

		<div class="row featurette">
			<div class="col-md-6">
				<img src="./asset/img/multiStack.png"
					alt="Echarts Multi-Series Stacking" />
			</div>
			<div class="col-md-6">
				<h2 class="featurette-heading">Multi-Series Stacking</h2>
				<p>ECharts is much smarter than you thought: with our
					auto-scaling graph entities and Cartesian coordinate system, you
					can stack multiple series of data any way you want.</p>
			</div>
		</div>

		<div class="row featurette">
			<div class="col-md-6">
				<h2 class="featurette-heading">Sub-Region Mode</h2>
				<p>
					In ECharts, we support World Map, China Map, Map of China Provinces
					& Cities. We also support sub-region mode, which develops
					sub-region maps from the main map types. In fact, ECharts can
					easily output the sketch maps of 176 countries and regions
					worldwide as well as over 600 cities nationwide. Try <a
						href="./example/map8.html#-en" target="_blank">this 》</a>
				</p>
			</div>
			<div class="col-md-6">
				<img src="./asset/img/subMapType.png" alt="Echarts Sub-Region Map" />
			</div>
		</div>

		<div class="row featurette">
			<div class="col-md-6">
				<img src="./asset/img/example/map7.png"
					alt="Echarts Standard GeoJson Extension" />
			</div>
			<div class="col-md-6">
				<h2 class="featurette-heading">GeoJson Map Extension</h2>
				<p>
					By compressing the standard GeoJson geographic data with efficient
					compression algorithm, we get the map data (only about 30% the size
					of the original standard geoJson data) to drive our built-in maps.
					If the built-in map data or types do not meet your project needs,
					you can always produce a new type yourself through simple dynamic
					registration. Try <a href="./example/map7.html#-en" target="_blank">this
						》</a>
				</p>
			</div>
		</div>

		<div class="row featurette">
			<div class="col-md-6">
				<h2 class="featurette-heading">MarkPoint &amp; MarkLine</h2>
				<p>We are fully aware of the need for adding extra markPoints
					and markLines: we know you want to mark certain positions on map,
					extreme points on line and trend line on column...And that's why we
					make our markPoints and markLines applicable to all the chart types
					in ECharts library, and more than that: markPoints and markLines in
					ECharts boast interactive features responsive to components like
					Legend Switch and Scale Roaming, etc.</p>
			</div>
			<div class="col-md-3">
				<img src="./asset/img/example/line1.png"
					alt="Echarts MarkPoint & MarkLine" style="height: 150px" />
			</div>
			<div class="col-md-3">
				<img src="./asset/img/example/map9.png"
					alt="Echarts MarkPoint & MarkLine" style="height: 150px" />
			</div>
		</div>

		<div class="row featurette">
			<div class="col-md-3">
				<img src="./asset/img/doc/multiControl.jpg"
					alt="Echarts Multi-level Control" style="height: 145px" />
			</div>
			<div class="col-md-3">
				<img src="./asset/img/custom.png" alt="Echarts High Customizability" />
			</div>
			<div class="col-md-6">
				<h2 class="featurette-heading">High Customizability</h2>
				<p>With over 600 configuration options and the design of
					multi-level control at hand, you are free to make your chart your
					way.</p>
				<a href="./doc-en.html" target="_blank">Documentation &raquo;</a>
			</div>
		</div>

		<div class="row featurette">
			<div class="col-md-6">
				<h2 class="featurette-heading">Event Interaction</h2>
				<p>
					We can capture user interaction and data change events to link
					chart to each other or the outside world. <a
						href="./example/mix3.html#-en" target="_blank">try this
						&raquo;</a>
				</p>
				<p>
					Event debugging <a href="./example/event.html#-en" target="_blank">Try
						this &raquo;</a>
				</p>
			</div>
			<div class="col-md-6">
				<img src="./asset/img/example/mix3.png"
					alt="Echarts Event Interaction" />
			</div>
		</div>

		<div class="row featurette">
			<div class="col-md-6">
				<img src="./asset/img/example/bar11.png" alt="Echarts Timeline" />
			</div>
			<div class="col-md-6">
				<h2 class="featurette-heading">Timeline</h2>
				<p>Dynamic data analysis is one of the most important features
					of information visualization. In ECharts, you can pair timeline
					with any chart type to display how data changes over time.</p>
				<p>
					Try <a href="./example/bar11.html#-en" target="_blank">bar »</a>、<a
						href="./example/scatter4.html#-en" target="_blank">scatter »</a>、<a
						href="./example/pie7.html#-en" target="_blank">pie »</a>、<a
						href="./example/map14.html#-en" target="_blank">map »</a>
				</p>
			</div>
		</div>
		<!-- /END THE FEATURETTES -->
	</div>

	<!-- FOOTER -->
	<footer id="footer"></footer>
	<!-- Bootstrap core JavaScript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="./asset/js/jquery.min.js"></script>
	<script type="text/javascript" src="./asset/js/echartsHome.js"></script>
	<script src="./asset/js/bootstrap.min.js"></script>
</body>
</html>
